<template>
  <div>
    <h1>用户管理</h1>
    <user-add @addListItem="addListItem"></user-add>
    <user-list :list="list" @delListById="delListById"></user-list>
  </div>
</template>

<script>
import userAdd from "@/components/user/Add.vue";
import userList from "@/components/user/List.vue";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "leson", age: 18 },
        { id: 2, name: "lulu", age: 19 },
        { id: 3, name: "lili", age: 28 },
      ],
    };
  },
  methods:{
    delListById(id){//删除
      this.list  = this.list.filter(item=>item.id !== id)
    },
    addListItem(item){//新增
      let id  =1;
      if(this.list.length){
        id  = this.list.map(item=>item.id).sort((a,b)=>b-a)[0]+1
      }
      this.list.push({...item,id});

    }


  },
  components: {
    userAdd,
    userList,
  },
};
</script>

<style></style>
